import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
import { Input, Button, Form } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { setLoginUser, toHome } from 'src/commons';
import config from 'src/commons/config-hoc';
import Banner from './banner/index';
import './style.less';

@config({
    path: '/login copy',
    ajax: true,
    noFrame: true,
    noAuth: true,
})
export default class extends Component {
    state = {
        loading: false,
        message: '',
        isMount: false,
        userinfo: {},
    };

    componentDidMount() {
        console.log(window.location);
        // 开发时方便测试，填写表单
        if (process.env.NODE_ENV === 'development' || process.env.PREVIEW) {
            this.form.setFieldsValue({ userName: 'xxm', password: '123456' });
        }

        setTimeout(() => this.setState({ isMount: true }), 300);
    }

    handleSubmit = async (values) => {
        if (this.state.loading) return;

        const { userName, password } = values;
        const params = {
            username: userName,
            password,
        };

        this.setState({
            loading: true
        })
        const res = await this.props.ajax.get('/admin/login/getAppToken', params)
        console.log(res, 'res')
        if (res.code === 200) {
            this.setState({userinfo: res});
            toHome();
        }else{
            // 提示密码错误
        }
        this.setState({
            loading: false
        })

    };

    render() {
        const { loading, message, isMount } = this.state;
        const formItemStyleName = isMount ? 'form-item active' : 'form-item';

        return (
            <div styleName="root" className="login-bg">
                <Helmet title="欢迎登陆"/>
                <div styleName="left">
                    <Banner/>
                </div>
                <div styleName="right">
                    <div styleName="box">
                        <Form
                            ref={form => this.form = form}
                            name="login"
                            className='inputLine'
                            onFinish={this.handleSubmit}
                        >
                            <div styleName={formItemStyleName}>
                                <div styleName="header">欢迎登录</div>
                            </div>
                            <div styleName={formItemStyleName}>
                                <Form.Item
                                    name="userName"
                                    rules={[ { required: true, message: '请输入用户名' } ]}
                                >
                                    <Input allowClear autoFocus prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
                                </Form.Item>
                            </div>
                            <div styleName={formItemStyleName}>
                                <Form.Item
                                    name="password"
                                    rules={[ { required: true, message: '请输入密码' } ]}
                                >
                                    <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="密码"/>
                                </Form.Item>
                            </div>
                            <div styleName={formItemStyleName}>
                                <Form.Item shouldUpdate={true} style={{ marginBottom: 0 }}>
                                    {() => (
                                        <Button
                                            styleName="submit-btn"
                                            loading={loading}
                                            type="primary"
                                            htmlType="submit"
                                            disabled={
                                                !this.form?.isFieldsTouched(true) ||
                                                this.form?.getFieldsError().filter(({ errors }) => errors.length).length
                                            }
                                        >
                                            登录
                                        </Button>
                                    )}
                                </Form.Item>
                            </div>
                        </Form>
                        <div styleName="error-tip">{message}</div>
                    </div>
                </div>
            </div>
        );
    }
}

